import React, { useState } from 'react';
import { Modal, StyleSheet } from 'react-native';
import { Button, Input, Text, View } from 'native-base';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { CommonStyle } from '../../../common/commonStyle.ts';
import { FasterImageView } from '@candlefinance/faster-image';
import Toast from 'react-native-toast-message';

let diffCompProdInstance: any = null;

interface IData {
  data: IGetBtnDefaultGoodsRes;
  linkUrl: string;
  eventId: number;
}
const CompPriceDiffPopup = () => {
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState<IData | undefined>();
  const [price, setPrice] = useState<string>('');
  const show = (data: IData) => {
    setData(data);
    setVisible(true);
  };

  const hide = () => {
    setVisible(false);
    setPrice('');
  };

  // 将组件的实例挂载到全局
  diffCompProdInstance = { show, hide };

  const handleInputChange = (text: string) => {
    const regex = /^\d*\.?\d*$/;
    if (regex.test(text)) {
      setPrice(text);
    } else {
      setPrice('');
    }
  };

  // 渲染产品信息
  const renderProductInfo = () => {
    if (!data) return;
    const { goods } = data.data;
    return (
      <View style={styles.card}>
        <View style={styles.productInfo_top}>
          <View style={{ width: 80, height: 80 }} overflow={'hidden'}>
            <FasterImageView style={{ flex: 1 }} source={{ url: goods.mainImg, transitionDuration: 0.3, resizeMode: 'contain', cachePolicy: 'discWithCacheControl', showActivityIndicator: true }} />
          </View>

          <View flex={1} ml={2} justifyContent={'space-between'}>
            <View flexDirection={'row'} justifyContent={'space-between'} alignItems={'center'}>
              <Text>{goods.name}</Text>
            </View>
            {goods.goodsType === 15 && goods.externalDiscount && (
              <Text fontSize={12} color={CommonStyle.price} fontWeight={'bold'}>
                {goods.externalDiscount / 10}折
              </Text>
            )}
          </View>
        </View>
      </View>
    );
  };
  return (
    <Modal transparent={true} visible={visible} animationType="fade" onRequestClose={() => hide()}>
      <View style={styles.overlay}>
        <View style={styles.container}>
          {renderProductInfo()}
          <Input marginTop={4} variant="filled" size="md" keyboardType={'numeric'} placeholder={'请输入原价'} value={price} focusOutlineColor={'green.500'} onChangeText={handleInputChange} />
          <View flexDirection={'row'} alignItems={'center'} marginTop={2}>
            <Text fontSize={12}>实际支付价格：</Text>
            <Text fontSize={14} fontWeight={'bold'} color={CommonStyle.price}>
              {price ? (Number(price) * (data?.data.goods.externalDiscount / 100)).toFixed(2) : 0}
            </Text>
          </View>
          <Button bg={CommonStyle.mainColor} width={'100%'} borderRadius={8} _pressed={{ bg: CommonStyle.btnSelectMainColor }} marginTop={2}>
            {handleNameJudgment(data)}
          </Button>
        </View>
        <View marginTop={30}>
          <AntDesign name={'closecircleo'} color={'white'} size={35} onPress={() => hide()} />
        </View>
      </View>
    </Modal>
  );
};

const handleNameJudgment = (data?: IData) => {
  if (!data) return '';
  if (data.linkUrl) {
    return data.linkUrl;
  }
  if (data.eventId === 11) {
    return '下单';
  } else {
    return '支付下单';
  }
};

// 全局函数用于调取组件的实例
export const ShowPriceDiffCompProdModal = {
  show: (data: IData) => {
    if (diffCompProdInstance) {
      diffCompProdInstance.show(data);
    }
  },
  hide: () => {
    if (diffCompProdInstance) {
      diffCompProdInstance.hide();
    }
  },
};

const styles = StyleSheet.create({
  overlay: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)' },
  container: { width: '95%', backgroundColor: '#fff', borderRadius: 10, padding: 8 },
  card: { paddingVertical: 12, backgroundColor: 'white', borderRadius: 8 },
  productInfo_top: { flexDirection: 'row', width: '100%', paddingHorizontal: 4 },
});

export default CompPriceDiffPopup;
